<template>
	 <view class="container user">
	    <view class="info dark-mode">
	      <h1 class="info_title">
	        <image class="info_title_logo" :src="userInfo.avatar? userInfo.avatar :'/static/02.jpg'"  />
	        <text class="info_title_name">{{userInfo.nickname}}</text>
	      </h1>
	      <view class="info_list">
	        <view class="info_item">
	          <navigator class="item_a info-link" url="/pages/order/list/index">
	            <uni-icons type="shop-filled" size="24" color="#333"></uni-icons>
	            <text class="item_dsc">我的订单</text>
	          </navigator>
	        </view>
	        <view class="info_item">
	          <navigator class="item_a info-link" url="/pages/course/collect/index">
	            <uni-icons type="vip-filled" size="24" color="#333"></uni-icons>
	            <text class="item_dsc">我的收藏</text>
	          </navigator>
	        </view>
	      </view>
	    </view>
	    <view class="list"></view>
	    <view class="logout dark-mode info-link" @click="toLogout">退出登陆</view>
	  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import reqUser from '@/api/user'
import { reactive } from 'vue';
const userInfo = reactive({
	avatar:'',
	nickname:''
})

onShow(()=>{
		if(uni.getStorageSync('token')){
			// 此时要去获取用户信息 显示 到页面上
			getUserInfo()
		}else {
			// 立即跳转到login页面
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
	})
	
	
	//获取用户信息
	const getUserInfo = async() => {
		const result = await reqUser.getUserInfo()
		// console.log(result)
		if(result.code === 200){
			userInfo.avatar = result.data.item.avatar
			userInfo.nickname = result.data.item.nickname
		}
	}
	
	//退出登录
	const toLogout = () => {
		uni.removeStorageSync('token')
		uni.reLaunch({
			url:'/pages/index/index'
		})
	}


</script>

<style lang="less">
.user {
  height: 100vh;
  background: #eee;
}
.info {
  background: #00CC99;
  &_title {
    height: 97px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    &_logo {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background: #fff;
    }
    &_name {
      margin-left: 10px;
      color: #333;
      font-size: 20px;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-wrap: normal;
    }
  }
  &_list {
    display: flex;
    .info_item {
      width: 50%;
      text-align: center;
      .item_a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 0;
      }
      .item_dsc {
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }
}

.logout {
  height: 52px;
  line-height: 52px;
  text-align: center;
  margin-top: 10px;
  background: #00CC99;
}

.popup_height {
  height: 100px;
  width: 100%;
  background: #fff;
}
</style>
